import * as THREE from "three";
import { createMesh, Renderer } from "./src/utils/utils";
import { ref } from "vue";
const CanvasWidth = ref(window.innerWidth);
const CanvasHeight = ref(window.innerHeight);
// 创建3D场景 Scene
const scene = new THREE.Scene();
const mesh = createMesh({
    geometry: {
        width: 100,
        height: 100,
        depth: 100,
    },
    material: {
        color: 0x87ceeb,
        transparent: true, //开启透明
        opacity: 0.5, //设置透明度
    },
    position: {
        x: 0,
        y: 0,
        z: 0,
    },
});

// 创建一个透视投影相机
const camera = new THREE.PerspectiveCamera(30, CanvasWidth.value / CanvasHeight.value, 1, 3000);
camera.position.set(200, 200, 200);
// 设置相机对准的坐标原点
camera.lookAt(mesh.position);

const axesHelper = new THREE.AxesHelper(150);

// 创建光源
const pointLight = new THREE.PointLight(0xffffff, 1.0);
// 设置光源位置 将光源放置x轴上
pointLight.position.set(400, 300, 300);

// 光源辅助观察
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
// 环境光 没有特定方向改变整体场景的光照明暗
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(80, 100, 50);
// 方向光指向的坐标 可以不设置 默认为 0,0,0
directionalLight.target = mesh;
// 平行光辅助观察
const directionalLinghtHelper = new THREE.DirectionalLightHelper(directionalLight, 5, 0xffcc);
Renderer({
    scene,
    camera,
    mesh,
    plogin: [
        mesh, // 模型网格
        axesHelper, // 网格辅助线
        pointLight, // 光源
        pointLightHelper, // 观察光源辅助工具
        ambient, // 环境光
        directionalLight, // 平行光
        directionalLinghtHelper, // 平行光辅助观察
    ],
    dom: document.body,
    CanvasWidth: CanvasWidth.value,
    CanvasHeight: CanvasHeight.value,
});
